<!-- 查询系统日志 -- 丁翔 -- 2017年4月25日 星期二 -->
<template>
  <div>
    <!-- 查询条件 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;height:46px">
      <el-form :inline="true" :model="sysLog">
        <el-form-item>
          <el-input v-model="sysLog.queryLoginName" size="small" placeholder="登录名" style="vertical-align:top;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="sysLog.queryUserName" size="small" placeholder="真实姓名" style="vertical-align:top;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="sysLog.queryType" size="small" placeholder="类型" style="vertical-align:top;" clearable id="el-select">
            <el-option label="全部" value=""></el-option>
            <el-option label="系统日志" value="0"></el-option>
            <el-option label="企业管理【运营】" value="1"></el-option>
            <el-option label="账号管理【运营】" value="2"></el-option>
            <el-option label="系统配置【运营】" value="3"></el-option>
            <el-option label="公告管理【运营】" value="4"></el-option>
            <el-option label="问题反馈【运营】" value="5"></el-option>
            <el-option label="菜单管理【运营】" value="6"></el-option>
            <el-option label="角色管理【运营】" value="7"></el-option>
            <el-option label="订单管理【运营】" value="9"></el-option>
            <el-option label="订单管理【商户】" value="10"></el-option>
            <el-option label="问题反馈【商户】" value="11"></el-option>
            <el-option label="账号管理【商户】" value="12"></el-option>
            <el-option label="角色管理【商户】" value="13"></el-option>
            <el-option label="企业信息维护【商户】" value="14"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="sysLog.queryBegin" size="small" type="date" placeholder="开始日期" @change="datebj" style="vertical-align:top;">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="sysLog.queryEnd" size="small" type="date" placeholder="结束日期" @change="datebj" style="vertical-align:top;">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search" size="small" style="vertical-align:top;line-height:14px">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table :data="sysLogList" v-loading="listLoading" border style="width: 100%; font-size: 12px;" tooltipEffect="light">
      <el-table-column align="center" :formatter="createTimeStr" label="日期" width="220">
      </el-table-column>
      <el-table-column align="center" :formatter="formatStatus" label="类型" width="200"></el-table-column>
      <el-table-column align="center" prop="userName" label="真实姓名" width="200">
      </el-table-column>
      <el-table-column align="center" prop="loginName" label="登录名" width="200">
      </el-table-column>
      <el-table-column align="center" prop="msg" label="操作内容" show-overflow-tooltip></el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-col :span="24" class="toolbar" style="margin-top: 15px;height: 50px;float: right;" v-show="!listLoading">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"
                     :total="total" style="float: right;">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        id: 0,
        account: {
          type: ''
        },
        listLoading: false,
        sysLogList: [],
        total: 2,
        pageNumber: 1,
        pageSize: 10,
        sysLog: { // 查询内容字段
          queryType: '',
          queryLoginName: '',
          queryUserName: '',
          queryBegin: '',
          queryEnd: ''
        }
      }
    },
    methods: {
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initSysLog()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.pageNumber = val
        this.currentPage = val
        this.initSysLog()
      },
      // 状态
      formatStatus (row, column) {
        if (row.type === 0) {
          return '系统日志'
        } else if (row.type === 1) {
          return '企业管理【运营】'
        } else if (row.type === 2) {
          return '账号管理【运营】'
        } else if (row.type === 3) {
          return '系统配置【运营】'
        } else if (row.type === 4) {
          return '公告管理【运营】'
        } else if (row.type === 5) {
          return '问题反馈【运营】'
        } else if (row.type === 6) {
          return '菜单管理【运营】'
        } else if (row.type === 7) {
          return '角色管理【运营】'
        } else if (row.type === 8) {
          return '账号管理【运营】'
        } else if (row.type === 9) {
          return '订单管理【运营】'
        } else if (row.type === 10) {
          return '订单管理【商户】'
        } else if (row.type === 11) {
          return '问题反馈【商户】'
        } else if (row.type === 12) {
          return '账号管理【商户】'
        } else if (row.type === 13) {
          return '角色管理【商户】'
        } else if (row.type === 14) {
          return '企业信息维护【商户】'
        }
      },
      // 时间格式化
      createTimeStr (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
        var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
        var hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
        var minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
        var second = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      },
      // 日期对比
      datebj () {
        if (this.queryFeedback.queryBegin !== '') {
          if (this.queryFeedback.queryEnd !== '') {
            if (this.queryFeedback.queryBegin > this.queryFeedback.queryEnd) {
              this.$message({
                showClose: true,
                message: '结束日期需大于开始日期',
                type: 'error'
              })
            }
          }
        }
      },
      search () {
        this.pageNumber = 1
        this.initSysLog()
      },
      initSysLog () {
        this.listLoading = true
        var para = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          queryType: this.sysLog.queryType,
          queryLoginName: this.sysLog.queryLoginName,
          queryUserName: this.sysLog.queryUserName,
          queryBegin: this.sysLog.queryBegin,
          queryEnd: this.sysLog.queryEnd,
          type: this.account.type
        }
        this.$http.post('/smartLight/web/baseSysLog/getList.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          if (resBody.isSuccess === 0) {
            this.sysLogList = resBody.result.content
            this.total = resBody.result.totalElements
          } else {
            if (resBody.isSuccess === 1) {
              sessionOut(this) // session超时处理
            } else if (resBody.isSuccess !== 0) {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          }
        })
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        // 浏览器向前或向后处理
        resetBreads(this)
      }
      this.account.type = user.type
      this.initSysLog()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.is-light
  max-width: 600px;
 #el-select
  .el-input
    vertical-align:top;
.cell
  padding-left: 0px !important
  padding-right 0px !important
  overflow: hidden !important
  text-overflow: ellipsis !important
  white-space: nowrap !important
  .el-checkbox {
    padding-left: 15px !important
  }
</style>
